<template>
  <div ref="target" class=" w-full h-1/2"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()

const target = ref(null)
let myChart = null

const uploadImg1 = 'https://img.isqqw.com/profile/upload/2023/07/24/373e5229-abcf-4a55-bca8-5051f95c84f4.png'
const uploadImg2 = 'https://img.ymblog.top/ymblog/'
let color = ['#ffffff', '#36fff6', '#ffe93a', '#67f95f'];
let oneArr = [{
   name: '数据可视化博客平台',
   type: 0,
   symbol: 'image://' + uploadImg1,
   symbolSize: 100,
}];
let erArr = [
   {
      name: '文章管理',
      type: 1
   },
   {
      name: '分类管理',
      type: 1
   }, 
   {
      name: '标签管理',
      type: 1
   }, 
   {
      name: '评论管理',
      type: 1
   }, 
   {
      name: '用户管理',
      type: 1
   }, 
   {
      name: '博客设置',
      type: 1
   }, 
   {
      name: '监控中心',
      type: 1
   },
   {
      name: '仪表盘',
      type: 1
   }, 
];
let allArr = [...oneArr, ...erArr],
   dataArr = [];

// 点
allArr.forEach((el, ind) => {
   if (el.type > 0) {
      el.symbolSize = 60;
      el.symbol = 'image://' + uploadImg2 + ind + '.png';
      el.itemStyle = {
         color: color[el.type],
      };
   }
   el.label = {
      show: true,
      position: "bottom",
      distance: 10,
      color: color[el.type],
      fontSize: 20
   };

});

// 圆形分区
function group(arr, r) {
   const newArray = [];
   const arLen = arr.length;
   arr.forEach((e, ind) => {
      // 按角度均匀分布
      const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
      const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r;
      const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r;
      const x1 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 5);
      const y1 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 5);
      const x0 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 30);
      const y0 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 30);
      e.value = [x.toFixed(2), y.toFixed(2)]
      e.twoPoint = [[x1.toFixed(2), y1.toFixed(2)], [x0.toFixed(2), y0.toFixed(2)]];
      newArray.push(e);
   });
   return newArray;
}

// 线配置
function linesConfig(arr) {
   const [dataArr, targetCoord] = [ [],[0, 0] ];
   arr.forEach((el) => {
      function getFormatItem(start, end) {
         let item = [
            { coord: el.twoPoint[start] },// 起点
            {
               coord: el.twoPoint[end],
               lineStyle: {
                  color: color[el.type],
                  curveness: el.type === 3 ? 0.1 : 0,
               },
               effect: {
                  color: color[el.type]
               }
            }, // 终点
         ]
         return item
      }
      switch (el.type) {
         case 0:
            break;
         case 1:
            dataArr.push(getFormatItem(0, 1));
            break;
         case 2:
            dataArr.push(getFormatItem(1, 0));
            break;
         case 3:
            dataArr.push(getFormatItem(0, 1));
            dataArr.push(getFormatItem(1, 0));
            break;
      }
   });
   return dataArr;
}

// 点分布
oneArr = group(oneArr, 0);
erArr = group(erArr, 40);
// twoArr = group(twoArr, -50);

allArr = [...oneArr, ...erArr];
// 线坐标和配置
dataArr = linesConfig(allArr);

function generateData(totalNum, bigvalue, smallvalue, color) {
   let dataArr = [];
   for (var i = 0; i < totalNum; i++) {
      if (i % 2 === 0) {
         dataArr.push({
            name: (i + 1).toString(),
            value: bigvalue,
            itemStyle: {
               color: color,
               borderWidth: 0,
            }
         });
      } else {
         dataArr.push({
            name: (i + 1).toString(),
            value: smallvalue,
            itemStyle: {
               color: "rgba(0,0,0,0)",
               borderWidth: 0,
            }
         });
      }

   }
   return dataArr;
}

let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)');
let threeData = generateData(6, 40, 10, '#2dc0c9');

let startAngle = 50; // 初始旋转角度
let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
let isBig = true // 缩放动画 标识

function init() {

  startAngle = startAngle - 5
  if (isBig) {
      radius = radius + 0.5
      if (radius > maxradius) {
        isBig = false
      }
  } else {
      radius = radius - 0.5
      if (radius < minradius) {
        isBig = true
      }
  }

  let option = {
      backgroundColor: '',
      xAxis: {
        show: false,
        type: "value",
        max: 50,
        min: -51,
      },
      grid: {
        top: 10,
        bottom: 10,
        left: 10,
        right: 10,
      },
      yAxis: {
        show: false,
        type: "value",
        max: 50,
        min: -50,
      },
      series: [{
        name: "节点",
        type: "graph",
        silent: false,
        cursor: 'pointer',
        coordinateSystem: "cartesian2d",
        z: 3,
        itemStyle: {
            shadowColor: "none",
        },
        emphasis: {
            scale: false
        },// 鼠标悬浮高亮
        data: allArr,
      },
      {
        name: "线图",
        type: "lines",
        emphasis: {
            scale: false
        },// 鼠标悬浮高亮
        silent: false,
        cursor: 'default',
        coordinateSystem: "cartesian2d",
        polyline: false, // 多线段
        z: 1,
        lineStyle: {
            width: 3,
            type: 'dashed',
            curveness: 0,
        },
        effect: {
            show: true,
            period: 8, //箭头指向速度，值越小速度越快
            trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 12
        },
        emphasis: {
            lineStyle: {
              type: 'dashed',
            }
        },
        data: dataArr,
      },
      {
        name: '不动外圆',
        type: 'pie',
        zlevel: 4,
        silent: true,
        radius: ['50%', '49%'],
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        data: dolitData
      },
      {
        type: 'pie',
        name: '旋转圆',
        zlevel: 20,
        silent: true,
        radius: ['40%', '39%'],//圆的大小
        emphasis: {
            scale: false
        },// 鼠标悬浮高亮
        startAngle: startAngle,
        data: threeData,
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
      },
      {
        name: '缩放圆',
        type: 'pie',
        zlevel: 4,
        silent: true,
        radius: [(radius + 1) + '%', radius + '%'],
        label: {
            show: false
        },
        labelLine: {
            show: false

        },
        data: dolitData
      },
      ],
  };
  
  myChart.setOption(option)

  myChart.on('click', function (params) {
      console.log(params.name);
	   // 此处一般写：click事件触发后的回调，来完成额外的功能
      // if (params.name == '回到首页') {
      //    router.push('/')
      // }
      switch(params.name) {
         case '数据可视化博客平台':
            router.push('/')
            break
         case '仪表盘':
            router.push('/admin/index')
            break
         case '文章管理':
            router.push('/admin/article/list')
            break
         case '分类管理':
            router.push('/admin/category/list')
            break
         case '标签管理':
            router.push('/admin/tag/list')
            break
         case '评论管理':
            router.push('/admin/comment/list')
            break
         case '用户管理':
            router.push('/admin/user/list')
            break
         case '博客设置':
            router.push('/admin/blog/setting')
            break
         case '监控中心':
            router.push('/admin/system')
            break
      }
	});
}



onMounted(() => {
  myChart = echarts.init(target.value)
  init()
})

</script>